<template>
	<div class="box" :style="{'backgroundSize':`100% 100%`}">
		<div class='head' :style="{'backgroundSize':`100% 100%`}">
			<div style="display: flex;align-items: center;justify-content:space-between;padding:5px 40px 0 40px;">
				<div>{{times}}</div>
				<div>xxx生产线</div>
			</div>
			<div style="letter-spacing:16px;font-size:30px;font-weight:600;line-height:20px;">产线大屏</div>
			<div class="trim" :style="{'backgroundSize':`100% 100%`}"></div>
		</div>
		<div style="display: flex;justify-content: space-between;margin:20px 10px 0 10px;width:100%;">
			<div style="width:100%;">
				<div class='bg' :style="{'backgroundSize':`100% 100%`}">
					<div style="display: flex;align-items:baseline;justify-content: space-between;">
						<div class="title" :style="{'backgroundSize':`100% 100%`}">产能趋势跟踪</div>
						<view style="width:55%;">
							<div style="display: flex;align-items:center;justify-content: flex-end;margin-right:30px;">
								<div v-for="(item,index) in tabList" :key="index" class="tabItem" @click="switchTab(index)"
								    :style="{backgroundColor:idx==index?'#2193ff':'',border:idx==index?'':'1px solid #2193ff'}">{{item.name}}</div>
							</div>
							<div class="line"></div>
						</view>
					</div>
					 <div class="chart" id='customerChart'></div>
				</div>
				<div class='bg' :style="{'backgroundSize':`100% 100%`}" style="margin-top:10px;">
					 <div class="title" :style="{'backgroundSize':`100% 100%`}">今日不良品分布</div>
					 <div class="chart" id='rejEchart'></div>
				</div>
			</div>
			<div style="width:100%;margin:0 10px;">
				<div class="num" :style="{'backgroundSize':`100% 100%`}">
					<div style="display: flex;align-items: center;justify-content: center;">
						<view style="width:7%;height:1px;background-color:#02617d;margin-right:10px;"></view>
						<div class="title" :style="{'backgroundSize':`100% 100%`}" style="color: #0bbcd4;font-weight:600;">今日生产商品数</div>
						<view style="width:7%;height:1px;background-color:#02617d;margin-left:10px;"></view>
					</div>
					<CountFlop :numm="val2" :numLen="8"/>
				</div>
				<div style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;width: 100%;">
					<div class="bg-1" :style="{'backgroundSize':`100% 100%`}">
						<div style="color:#0cd6eb;font-size:20px;width:120px;text-align: center;margin-top:10px;">今日完成工单</div>
						<div style="display:flex;align-items: center;justify-content:space-between;">
							<div style="color:#fff;font-weight:600;font-size:20px;width:120px;text-align: center;">909</div>
							<div style="text-align: center;">
								<div style="color:#cf800a;">昨日完成工单</div>
								<div style="color:#fff;margin-top:10px;">999</div>
							</div>
						</div>
					</div>
					<div class="bg-1" :style="{'backgroundSize':`100% 100%`}">
						<div style="color:#0cd6eb;font-size:20px;width:120px;text-align: center;margin-top:10px;">今日领取工单</div>
						<div style="display:flex;align-items: center;justify-content:space-between;">
							<div style="color:#fff;font-weight:600;font-size:20px;width:120px;text-align: center;">909</div>
							<div style="text-align: center;">
								<div style="color:#cf800a;">昨日领取工单</div>
								<div style="color:#fff;margin-top:10px;">999</div>
							</div>
						</div>
					</div>
					<div class="bg-1" :style="{'backgroundSize':`100% 100%`}">
						<div style="color:#8be407;font-size:20px;width:120px;text-align: center;margin-top:10px;">今日合格品数</div>
						<div style="display:flex;align-items: center;justify-content:space-between;">
							<div style="color:#8be407;font-weight:600;font-size:20px;width:120px;text-align: center;">909</div>
							<div style="text-align: center;">
								<div style="color:#cf800a;">昨日合格品数</div>
								<div style="color:#fff;margin-top:10px;">999</div>
							</div>
						</div>
					</div>
					<div class="bg-1" :style="{'backgroundSize':`100% 100%`}">
						<div style="color:#ffff00;font-size:20px;width:120px;text-align: center;margin-top:10px;">待生产商品数</div>
						<div style="display:flex;align-items: center;justify-content:space-between;">
							<div style="color:#ffff00;font-weight:600;font-size:20px;width:120px;text-align: center;">909</div>
							<div style="text-align: center;">
								<div style="color:#d9001b;">超期工单</div>
								<div style="color:#d9001b;margin-top:10px;">999</div>
							</div>
						</div>
					</div>
					<div class="bg-1" :style="{'backgroundSize':`100% 100%`}">
						<div style="color:#d9001b;font-size:20px;width:120px;text-align: center;margin-top:10px;">今日不合格数</div>
						<div style="display:flex;align-items: center;justify-content:space-between;">
							<div style="color:#d9001b;font-weight:600;font-size:20px;width:120px;text-align: center;">909</div>
							<div style="text-align: center;">
								<div style="color:#cf800a;">昨日不合格品数</div>
								<div style="color:#fff;margin-top:10px;">999</div>
							</div>
						</div>
					</div>
					<div class="bg-1" :style="{'backgroundSize':`100% 100%`}">
						<div style="display: flex;align-items: center;justify-content:space-evenly;">
							<div style="width:80px;">
								<Circle :progress="50" color="#62a208" text='50%' size='80'/>
								<div style="text-align: center;color:#fff;margin-top:6px;font-size:14px;">商品率</div>
							</div>
							<div style="width:80px;">
								<Circle :progress="90" color="#ff66ff" text='90%' size='80'/>
								<div style="text-align: center;color:#fff;margin-top:6px;font-size:14px;">生产总进度</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="width:100%;padding-right:20px;">
				<div class='bg' :style="{'backgroundSize':`100% 100%`}" style="margin-top:10px;">
					 <div class="title" :style="{'backgroundSize':`100% 100%`}">今日员工生产top</div>
					 <dv-scroll-ranking-board :config="config" style="width:500px;height:285px"></dv-scroll-ranking-board>
				</div>
				<div class='bg' :style="{'backgroundSize':`100% 100%`}" style="margin-top:10px;">
					 <div class="title" :style="{'backgroundSize':`100% 100%`}">今日生产排行</div>
					 <div class="chart" id='prEchart'></div>
				</div>
			</div>
		</div>
		<div style="display: flex;align-items: center;justify-content:space-between;padding:10px;">
			<div style="width:50%;">
				<div class='bg' :style="{'backgroundSize':`100% 100%`}">
					<div style="display: flex;align-items:baseline;justify-content: space-between;">
						<div class="title" :style="{'backgroundSize':`100% 100%`}">不良品分析</div>
						<view style="width:55%;">
							<div style="display: flex;align-items:center;justify-content: flex-end;margin-right:30px;">
								<div v-for="(item,index) in tabList" :key="index" class="tabItem" @click="switchTab(index)"
								    :style="{backgroundColor:idx==index?'#2193ff':'',border:idx==index?'':'1px solid #2193ff'}">{{item.name}}</div>
							</div>
							<div class="line"></div>
						</view>
					</div>
					 <div class="chart" id='anEcharts'></div>
				</div>
			</div>
			<div style="width:100%;margin-left:10px;">
				<div class='bg' :style="{'backgroundSize':`100% 100%`}">
					<el-table :data="tableData" style="width: 100%" height="320" :header-row-style="{background:'#02375a'}">
					    <el-table-column fixed prop="proCode" label="生产工单编码" width="120" align='center'/>
					    <el-table-column prop="shopCode" label="商品编码" width="120" align='center'/>
					    <el-table-column prop="shopName" label="商品名称" width="120" align='center'/>
					    <el-table-column prop="model" label="规格型号" width="110" align='center'/>
					    <el-table-column prop="workNum" label="工单数量" width="110" align='center'/>
					    <el-table-column prop="proNum" label="已生产数量" width="110" align='center'/>
						<el-table-column prop="passNum" label="合格数量" width="110" align='center'/>
						<el-table-column prop="nopassNum" label="不合格数量" width="110" align='center'/>
						<el-table-column prop="lv" label="良品量" width="90" align='center'/>
						<el-table-column prop="plan" label="生产进度" width="90" align='center'/>
					  </el-table>
				</div>	
			</div>
		</div>
	</div>
</template>

<script>
	 import { onMounted ,ref,reactive} from "vue";
	 import * as echarts from 'echarts'
	 import CountFlop from "../../components/countTo.vue"
	 import Circle from "../../components/circle.vue"
	 export default {
	   name: "data_page",
	   components:{
		  CountFlop,
		  Circle
	   },
	   setup() {
		 const val2 = ref(2020)
		 const idx = ref(0)
		 const times = ref('')
		 const barData = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]
		 const interval = ref('')
		 const max = ref('')
		 max.value = Math.max.apply(null, barData)
		 interval.value = Math.max.apply(null, barData) / 4
		 const tabList = ref([
			 {
				 name:'近7日',
				 id:0
			 },{
				 name:'近15日',
				 id:1
			 },{
				 name:'近30日',
				 id:2
			 }
		 ])
		 const tableData = [
		   {
		     proCode:'scgo29898778',
			 shopCode:'B365986A',
			 shopName:'汽车PCB板',
			 model:'300x200',
			 workNum:'1000',
			 proNum:'600',
			 passNum:'590',
			 nopassNum:'10',
			 lv:'99.99%',
			 plan:'60%'
		   },
		   {
		     proCode:'scgo29898778',
		   			 shopCode:'B365986A',
		   			 shopName:'汽车PCB板',
		   			 model:'300x200',
		   			 workNum:'1000',
		   			 proNum:'600',
		   			 passNum:'590',
		   			 nopassNum:'10',
		   			 lv:'99.99%',
		   			 plan:'60%'
		   }, {
		     proCode:'scgo29898778',
			 shopCode:'B365986A',
			 shopName:'汽车PCB板',
			 model:'300x200',
			 workNum:'1000',
			 proNum:'600',
			 passNum:'590',
			 nopassNum:'10',
			 lv:'99.99%',
			 plan:'60%'
		   }, {
		     proCode:'scgo29898778',
			 shopCode:'B365986A',
			 shopName:'汽车PCB板',
			 model:'300x200',
			 workNum:'1000',
			 proNum:'600',
			 passNum:'590',
			 nopassNum:'10',
			 lv:'99.99%',
			 plan:'60%'
		   },{
		     proCode:'scgo29898778',
			 shopCode:'B365986A',
			 shopName:'汽车PCB板',
			 model:'300x200',
			 workNum:'1000',
			 proNum:'600',
			 passNum:'590',
			 nopassNum:'10',
			 lv:'99.99%',
			 plan:'60%'
		   },{
		     proCode:'scgo29898778',
			 shopCode:'B365986A',
			 shopName:'汽车PCB板',
			 model:'300x200',
			 workNum:'1000',
			 proNum:'600',
			 passNum:'590',
			 nopassNum:'10',
			 lv:'99.99%',
			 plan:'60%'
		   },{
		     proCode:'scgo29898778',
			 shopCode:'B365986A',
			 shopName:'汽车PCB板',
			 model:'300x200',
			 workNum:'1000',
			 proNum:'600',
			 passNum:'590',
			 nopassNum:'10',
			 lv:'99.99%',
			 plan:'60%'
		   },{
		     proCode:'scgo29898778',
			 shopCode:'B365986A',
			 shopName:'汽车PCB板',
			 model:'300x200',
			 workNum:'1000',
			 proNum:'600',
			 passNum:'590',
			 nopassNum:'10',
			 lv:'99.99%',
			 plan:'60%'
		   }
		 ]
		 const config = reactive({
		   data: [
		     {
		       name: '周口',
		       value: 55,
		     },
		     {
		       name: '南阳',
		       value: 120,
		     },
		     {
		       name: '西峡',
		       value: 78,
		     },
		     {
		       name: '驻马店',
		       value: 66,
		     },
		     {
		       name: '新乡',
		       value: 80,
		     },
		     {
		       name: '信阳',
		       value: 45,
		     },
		     {
		       name: '漯河',
		       value: 29,
		     },
		   ],
		   unit: '万元',
		 })
		 const formatTime=(time)=>{
			   return time < 10 ? `0${time}` : time
		 }
		 const getTime=()=>{
			 const now = new Date()
			 const year = now.getFullYear()  //年
			 const month = now.getMonth() + 1 //月
			 const day = now.getDate()    //日
			 const hours = now.getHours()  //小时数
			 const minutes = now.getMinutes()  //分钟数
			 const seconds = now.getSeconds()  //秒数
			 const week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][now.getDay()]  //星期
		     times.value =  `${year}年${formatTime(month)}月${formatTime(day)}日 ${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}   ${week}`
		 }
		 const switchTab=(id)=>{
			 console.log('11',idx);
			 idx.value = id
		 }
	     onMounted(() => {//需要获取到element,所以是onMounted的Hook
		   getTime()
	       let myChart = echarts.init(document.getElementById("customerChart"));
		   // console.log('29202209280298',myChart);
	       // 绘制图表
	       myChart.setOption({
	         tooltip: {},
	         xAxis: {
	           data: ["12-1", "12-2", "12-3", "12-4", "12-5", "12-6",'12-7','12-8','12-9','12-10',"12-1", "12-2", "12-3", "12-4", "12-5", "12-6",'12-7','12-8','12-9','12-10',"12-1", "12-2", "12-3", "12-4", "12-5", "12-6",'12-7','12-8','12-9','12-10'],
	         },
	         yAxis: [
				  {
				       type: 'value',
				       min: 0,
				       max:max.value,
					   interval:interval.value,
				       axisLabel: {
				         formatter: '{value}'
				       }
				  },
				  {
				       type: 'value',
				       min: 0,
				       max: 100,
					   interval: 25,
				       axisLabel: {
				         formatter: '{value} %'
				       }
				  }
			 ],
	         series: [
	           {
	             name: "合格量",
	             type: "bar",
	             data: barData,
	           },
			   {
			     name: "合格量",
			     type: "line",
			     data: [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10],
			   },
	         ],
	       });
		   let reChart = echarts.init(document.getElementById("rejEchart"));
		   // 绘制图表
		   reChart.setOption({
		     tooltip: {},
		     xAxis: {
		       data: ['1222-x','122-3','112-x','1238'],
		     },
		     yAxis: [
		   				  {
		   				       type: 'value',
		   				       min: 0,
		   				       max: 20,
		   				       axisLabel: {
		   				         formatter: '{value}'
		   				       }
		   				  }
		   			 ],
		     series: [
		       {
		         name: "不良品量",
		         type: "bar",
		         data: [1,2,3,4,5,6,7,8,9,10],
		       }
		     ],
		   });
		   let prChart = echarts.init(document.getElementById("prEchart"));
		   // 绘制图表
		   prChart.setOption({
		      tooltip: {
		         trigger: 'axis',
		         axisPointer: {
		           type: 'shadow',
		         }
		       },
		       legend: {
				   textStyle:{
					   color:'#3f5ea2'
				   }
			   },
		       grid: {
		         left: '3%',
		         right: '4%',
		         bottom: '3%',
		         containLabel: true,
		       },
		      color:['#68ad13','#d9001b'],
		      xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01]
		      },
		      yAxis: {
		        type: 'category',
		        data: ['1222-x','122-3','112-x','1238']
		      },
		      series: [
		        {
		          name: '产量',
		          type: 'bar',
		          data: [18203, 23489, 29034, 104970, 131744, 30230],
		      				   label: {
		      						   show: true, //开启显示
		      						   position: 'right', //在上方显示
		      						   formatter: '{c}',//显示百分号
		      						   textStyle: { //数值样式
		      							   color: '#fff',//字体颜色
		      							   fontSize: 10//字体大小
		      				         },
		      					}	 
		        },
		        {
		          name: '不合格',
		          type: 'bar',
		          data: [19325, 23438, 31000, 121594, 134141, 381807],
		      				   label: {
		      							   show: true, //开启显示
		      							   position: 'right', //在上方显示
		      							   formatter: '{c}',//显示百分号
		      							   textStyle: { //数值样式
		      								   color: '#fff',//字体颜色
		      								   fontSize: 10//字体大小
		      				         },
		      					}	 
		        }
		      ]
		   });
		   let anChart = echarts.init(document.getElementById("anEcharts"));
		   // console.log('29202209280298',myChart);
		   // 绘制图表
		   anChart.setOption({
		     tooltip: {},
		     xAxis: {
		       data: ["12-1", "12-2", "12-3", "12-4", "12-5", "12-6",'12-7','12-8','12-9','12-10',"12-1", "12-2", "12-3", "12-4", "12-5", "12-6",'12-7','12-8','12-9','12-10',"12-1", "12-2", "12-3", "12-4", "12-5", "12-6",'12-7','12-8','12-9','12-10'],
		     },
		     yAxis: [
		   				 {
		   				      type: 'value',
		   				      min: 0,
		   				      max:max.value,
		   				 					   interval:interval.value,
		   				      axisLabel: {
		   				        formatter: '{value}'
		   				      }
		   				 },
		   				 {
		   				      type: 'value',
		   				      min: 0,
		   				      max: 100,
		   				 	  interval: 25,
		   				      axisLabel: {
		   				        formatter: '{value} %'
		   				      }
		   				 }
		   			 ],
		     series: [
		       {
		         name: "合格量",
		         type: "bar",
		         data:barData,
		       },
		   			   {
		   			     name: "合格量",
		   			     type: "line",
		   			     data: [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10],
		   			   },
		     ],
		   });
		   window.onresize = function () {//自适应大小
		      prChart.resize();
			  anChart.resize();
			  reChart.resize();
			  myChart.resize();
			  anChart.resize()
		   };
	     });
		 return{
		 	tabList,
			idx,
			switchTab,
			times,
			val2,
			config,
			tableData
		 }
	   }
   }
</script>

<style lang="scss" scoped>
    ::v-deep .el-table.is-scrolling-left th.el-table-fixed-column--left{
		background-color: transparent !important;
	}
	::v-deep .el-table__header-wrapper tr th.el-table-fixed-column--left{
		background-color: transparent !important;
	}
	::v-deep .el-table tbody tr:hover>td {
	   background:#02375a !important;
	}
    .el-table::before {
      height: 0px;
    }

	::v-deep .el-table,
	::v-deep .el-table__expanded-cell {
	  background-color: transparent;
    }
	::v-deep .el-table th,
	::v-deep .el-table tr,
	::v-deep .el-table td {
	  background-color: transparent;
	  color: #fff;
	}
	.box{
		background-image: url(../../assets/version/bg.png);
		background-repeat: no-repeat;
		width: 100%;
	}
	.head{
		background-image: url(../../assets/version/head.png);
		text-align: center;
		height:60px;
		color: #fff;
		background-repeat: no-repeat;
		position: relative;
		left: 0;
		top: 0;
		z-index:2000;
	}
	.trim{
		background-image: url(../../assets/version/head1.png);
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		margin-left:-22.5%;
		top:2px;
		z-index:20;
		width:45%;
		height: 100px;
	}
	.num{
		background-image:url(../../assets/version/num.png);
		padding:25px;
		background-repeat: no-repeat;
		width:100%;
		height:200px;
	}
	.bg{
		background-image:url(../../assets/version/kuang.png);
		padding:20px 10px 0 10px;
		background-color:#021333;
		background-repeat: no-repeat;
	}
	.title{
		width:120px;
		background-color:rgba(9, 35, 71);
		background-image:url(../../assets/version/title.png);
		background-repeat: no-repeat;
		color:#fff;
		padding:5px 0;
		font-size:13px;
		text-align: center;
		font-weight:800;
	}
	.line{
		background-image:url(../../assets/version/line.png);
		background-repeat: no-repeat;
		width:90%;
		height:40px;
	}
	.bg-1{
		background-image:url(../../assets/version/num1.png);
		background-repeat: no-repeat;
		width:49%;
		padding:10px;
		height:120px;
		margin-top:30px;
	}
	.chart{
		height:255px;
	}
	.tabItem{
		padding:3px 0;
		width:60px;
		text-align: center;
		border-radius:10px;
		margin-left:10px;
		color:#fff;
		font-size:12px;
	}
</style>